<template>
    <a-card size="small" class="c-card" >
        <div class="c-list">
            <img :src="proxy.globalInfo.imageUrl + props.cardObj.cover" alt="" @click="toRouter('/blog/'+ props.cardObj.blogId)">
            <div class="c-main">
                <div class="c-title" @click="toRouter('/blog/'+ props.cardObj.blogId)">{{ props.cardObj.title }}</div>
                <div class="c-content">{{ props.cardObj.summary }}</div>
                <div class="c-bottom">
                    <span>创建时间:&nbsp;{{ props.cardObj.createTime }}</span>
                    <span>作者:&nbsp;<span class="nick" @click="toRouter('/user')">{{ props.cardObj.nickName }}</span></span>
                    <span>分类专栏:&nbsp; <span class="group" @click="toRouter('/category/' + props.cardObj.categoryId)">{{ props.cardObj.categoryName }}</span></span>
                </div>
            </div>
        </div>
    </a-card>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps({
    cardObj: {
        type: Object,
        required: true
    }
})
const toRouter = (path) => {
    router.push({path:path })
}
</script>

<style lang="scss" scoped>
.c-card {
    box-sizing: border-box;
    width: 100%;
    height: 140px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;

    .c-list {
        display: flex;
        height: 100%;

        img {
            width: 100px;
            height: 100px;
            margin-right: 20px;
            margin-left: 6px;
            cursor: pointer;
        }

        .c-main {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
            line-height: 1.5;

            .c-title {
                color: $font-color-primary;
                cursor: pointer;
            }
            .c-content {
                font-size: 12px;
            }
            .c-bottom {
                span {
                    padding-right: 15px;
                }

                .nick,
                .group {
                    color: $font-color-primary;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>